import React, { useMemo } from 'react';
import { Form, Input, Select, Button, Space, Row } from 'antd';
import Icon from '@/components/layout/Icon';
import { sync } from '@/request/gitlab';

const layout = {
  labelCol: { flex: '70px' },
  wrapperCol: { flex: '200px' },
};

const ProjectSearch = (props: any) => {
  const { groups, handleFinish, handleReset } = props;
  const [form] = Form.useForm();

  const Options = useMemo(() => {
    if (!groups) return [];
    return groups.map((item: any) => ({
      value: item.name,
      label: item.name,
    }));
  }, [groups]);

  const onSearch = (values) => {
    handleFinish(values);
  };

  const onReset = () => {
    form.resetFields();
    handleReset();
  };

  return (
    <Row justify="space-between">
      <Form colon={false} form={form} {...layout} onFinish={onSearch} layout="inline" style={{ marginBottom: '20px' }}>
        <Space size={4}>
          <Form.Item name="name" label="项目名称">
            <Input placeholder="请输入项目名称" allowClear style={{ width: '200px' }} />
          </Form.Item>
          <Form.Item name="groupName" label="项目分组">
            <Select options={Options} placeholder="请选择项目组" allowClear style={{ width: '200px' }} />
          </Form.Item>
          <Form.Item>
            <Row>
              <Button onClick={onReset} style={{ marginRight: '10px' }}>
                重 置
              </Button>
              <Button type="primary" className="flex" htmlType="submit" icon={<Icon src="/images/search.png" width={16} height={16} style={{ marginRight: '4px' }} />}>
                查 询
              </Button>
            </Row>
          </Form.Item>
        </Space>
      </Form>
      <Button
        type="primary"
        onClick={() => {
          sync();
        }}
      >
        更新项目列表
      </Button>
    </Row>
  );
};

export default ProjectSearch;
